<template>
    <div class="edit">
        <div class="left">
            <div class="title">【无主题创作】讲述那些属于您的故事</div>
            <div class="content">
                <p>欢迎做客【故事汇交流网站】, 留下属于您的真实故事</p>
                <p>★★★如果不知道该如何创作，您可以尝试创作如下内容:</p>
                <p>【我和城市的故事】租房，求职，相亲……哪些寻找和失去不吐不快？</p>
                <p>【我的父亲母亲】家族史、成长史，哪些过往让你背负至今？</p>
                <p>【我的职场故事】程序员，新媒体编辑，公务员……分享你的心路。</p>
                <p>【那些人那些事】无论时间地点，总有一段事一个人让你难以忘怀。</p>
                <p>★★★我们希望您能按照如下格式提供内容：</p>
                <p>（1）提供您的基础信息，性别，年龄等；</p>
                <p>（2）您要讲述的故事梗概（哪一年在哪里发生的什么样的事情）</p>
                <p>（3）分享这个故事中你印象最深的1-2个细节和场景</p>
                <p>（4）故事的结局</p>
                <p>（5）提供几张有助于我们了解故事的照片</p>
                <p>您可以直接在页面右方发表内容，期待下一个和你相逢的人，通过故事读懂你。</p>
                
            </div>
        </div>
        
        <div class="write">
                <div class="logo"><i class="iconfont icon-tubiaozhizuomoban-"></i> 写 故 事</div>
                <p ></p>
                <textarea id="contentSimple" name="content" class="text form-control kindeditorSimple" v-model="texttitle" placeholder="给你的故事来个标题吧"></textarea>
                <p style="height:15px;"></p>
                <textarea  id="contentSimple" name="content" class="text form-control kindeditorSimple" style="height:300px;" v-model="textarea" placeholder="此为正文..."></textarea>
                <p></p>
                <div class="upload">
                 <span>
                     <el-upload action="" :auto-upload='false' :file-list="fileList" :on-change="handleChange"></el-upload>
                </span>
                <span></span>
                <span><button type="button" class="btn btn-success" @click="add">上传</button></span>
                </div>
                
        </div>
    </div>


    
</template>

<script>


export default {
    name:"writeStory",
    data(){
        return{
            texttitle:'',
            textarea:'',
            id:'',
            fileList:[],
            msg:''
        }
    },
    methods:{
         handleChange(file,fileList) { 
                this.fileList = fileList;
        },
        add(){
            let formData = new FormData(); //文件转换
                formData.append("fileList", this.fileList[0].raw);
                this.$axios.post('storyPicUpload.do', formData, {
                    "Content-Type": "multipart/form-data;charset=utf-8"
                }).then(res => {
                    this.msg=res.data;
                    console.log(res+"上传成功")

            this.id = window.localStorage.getItem("uid");
            this.$axios.post("/usadd.do?us_title="+this.texttitle+
            "&us_content="+this.textarea+
            "&user_id="+this.id+
            "&us_img="+this.msg)
            .then((response) => {
                this.add = response.data;
                if(this.add > 0){
                    alert("上传成功！")
                }else{
                    alert("上传失败！")
                }
            })   
                   
                })
        },
        

    },
    mounted(){
       
    }


}
</script>

<style scoped="scoped">
.edit{
    text-align: left;
    margin-left: 35px;
    display: flex;
}
.left{
    width: 50%;
}
.title{
    margin-top: 5%;
    padding-bottom: 20px;
    font-size: 35px;
    font-weight: 900;
}
.content{
    font-size: 18px;
    margin-left: 30px;
    color: rgb(20, 20, 20);
}

.write{
    width: 50%;
    margin-top: 5%;
    margin-right: 35px;
    border: 1px solid #f8f7f5;
    background-color: #f8f8f8;
    height: 80%;
}
.mytitle{
    width: 100%;
}
.text{
    border-radius: 0;
    border: none;
}
.upload{
    display: flex;
}
.upload input{
    margin-left: 25px;
    margin-bottom: 20px;
    height: 30px;
}
.upload button{
    height: 30px;
    
}
.upload span:nth-child(2){
    width: 60%;
}
.upload span:nth-child(3){
    width: 20%;
}
.logo{
    font-size: 25px;
    text-align: center;
}
.icon-tubiaozhizuomoban-{
    font-size: 25px;
    padding-top: 2px;
}
</style>